<template>
	<view class="home-act-list component-diy" :style="marginStyle">
		<view class="liveInfo" v-if="liveList.anchor_name" :style="boxStyle">
			<view class="anchorInfo" @click="toLive">
				<image :src="liveList.share_img" mode="aspectFill" class="anchorImg" :style="avatarBroderColor"></image>
				<text class="anchorName" :style="userNameColor">{{liveList.anchor_name}}</text>
				<text class="liveStatus" v-if="liveList.live_status == 101 || edit" :style="processingColor">·
					直播中</text>
				<text class="beforeLive" v-if="liveList.live_status == 102 || edit" :style="preColor">预 播</text>
			</view>
			<view class="liveMore">
				<text class="liveText" @click="seeMoreAnchor" :style="moreColor">查看更多</text>
				<uni-icons type="forward" size="14" :color="componentData.moreColor"></uni-icons>
			</view>
		</view>
		<view class="liveInfo" v-if="edit && !liveList.anchor_name" :style="boxStyle">
			<view style="text-align: center;width: 100%;color:#666;font-size: 12px;">暂无直播</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['componentData'],
		data() {
			return {
				liveList: {},
				edit: false
			};
		},
		computed: {
			marginStyle() {
				let css = {
					'margin': '5px 15px',
					'padding': 0,
					'margin-top': this.componentData.marginTop + 'px',
					'margin-bottom': this.componentData.marginBottom + 'px',
					'margin-left': this.componentData.marginLR + 'px',
					'margin-right': this.componentData.marginLR + 'px',
				}
				return this.$joinStyle(css);
			},
			boxStyle() {
				let css = {
					'border-radius': this.componentData.borderRadius + 'px',
					'background-color': this.componentData.backgroundColor,
				}
				return this.$joinStyle(css);
			},
			avatarBroderColor() {
				return this.borderColor('avatarBroderColor');
			},
			userNameColor() {
				return this.color('userNameColor');
			},
			moreColor() {
				return this.color('moreColor');
			},
			processingColor() {
				let processing = [];
				processing.push(this.getBackgroundColor('searchPlaceholderColor'));
				processing.push(this.color('processingTextColor'));
				return processing.join(';');
			},
			preColor() {
				let pre = [];
				pre.push(this.getBackgroundColor('preBackgroundColor'));
				pre.push(this.color('preTextColor'));
				return pre.join(';');
			}
		},
		methods: {
			color(type) {
				const css = {
					'color': this.componentData[type]
				};
				return this.$joinStyle(css);
			},
			getBackgroundColor(type) {
				const css = {
					'background-color': this.componentData[type]
				};
				return this.$joinStyle(css);
			},
			borderColor(type) {
				const css = {
					'border-color': this.componentData[type]
				};
				return this.$joinStyle(css);
			},
			toLive() {
				const roomId = this.liveList.roomid; // 填写具体的房间号，可通过下面【获取直播房间列表】 API 获取
				const customParams = encodeURIComponent(JSON.stringify({
					path: 'pages/index/index',
					pid: 1
				})); // 开发者在直播间页面路径上携带自定义参数（如示例中的path和pid参数），后续可以在分享卡片链接和跳转至商详页时获取
				uni.navigateTo({
					url: `plugin-private://uni2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}`
				})
			},
			seeMoreAnchor() {
				uni.navigateTo({
					url: '/pages/index/lives/lives',
				})
			}
		},
		async mounted() {
			try {
				const res = await this.$request('SmallProgramApi/ProgramLive/getLiveRoomFind');
				if (res.status == 1) {
					this.liveList = res.data;
				}
			} catch (e) {
				//TODO handle the exception
			}
		}
	}
</script>

<style lang="less" scoped>
	/* #ifdef H5 */
	.live-list {
		display: flex;
		flex-direction: column;
		color: #333;
		font-size: 14px;
		width: 100px;
		border: 0.5px solid #d8d8d8;
		border-radius: 5px;
		margin: 2.5px;
	}

	.liveInfo {
		// width: 345px;
		height: 60px;
		margin: 0 auto;
		background-color: #FFF;
		border-radius: 5px;
		clear: both;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.anchorInfo {
		width: 260px;
		height: 60px;
		display: flex;
		align-items: center;
	}

	.anchorImg {
		margin: 5px;
		background-color: #999;
		width: 50px;
		height: 50px;
		border: 1px solid #FF948A;
		border-radius: 50%;
		vertical-align: middle;
		flex-shrink: 0;
	}

	.anchorName {
		padding: 0 5px;
		font-size: 16px;
		max-width: 150px;
		box-sizing: border-box;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.liveStatus {
		padding: 0 5px;
		width: 50px;
		height: 17px;
		font-size: 12px;
		background-color: #ff5c6d;
		letter-spacing: 1px;
		color: #FFF;
		text-align: center;
		flex-shrink: 0;
	}

	.liveMore {
		display: flex;
		align-items: center;
	}

	.liveText {
		color: #888;
		font-size: 13px;
		margin-right: 2.5px;
	}

	.beforeLive {
		padding: 0 5px;
		width: 50px;
		height: 17px;
		background-color: #A271FE;
		text-align: center;
		font-size: 12px;
		letter-spacing: 1px;
		color: #FFF;
		flex-shrink: 0;
	}

	/* #endif */
	/* #ifndef H5 */
	.live-list {
		display: flex;
		flex-direction: column;
		color: #333;
		font-size: 14px;
		width: 200rpx;
		border: 1rpx solid #d8d8d8;
		border-radius: 10rpx;
		margin: 5rpx;
	}

	.liveInfo {
		// width: 690rpx;
		height: 120rpx;
		margin: 0 auto;
		background-color: #FFF;
		border-radius: 10rpx;
		clear: both;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.anchorInfo {
		width: 520rpx;
		height: 120rpx;
		display: flex;
		align-items: center;
	}

	.anchorImg {
		margin: 10rpx;
		background-color: #999;
		width: 100rpx;
		height: 100rpx;
		border: 1px solid #FF948A;
		border-radius: 50%;
		vertical-align: middle;
		flex-shrink: 0;
	}

	.anchorName {
		padding: 0 10rpx;
		font-size: 16px;
		max-width: 300rpx;
		box-sizing: border-box;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.liveStatus {
		padding: 0 10rpx;
		width: 100rpx;
		height: 34rpx;
		font-size: 12px;
		background-color: #ff5c6d;
		letter-spacing: 1px;
		color: #FFF;
		text-align: center;
		flex-shrink: 0;
	}

	.liveMore {
		display: flex;
		align-items: center;
	}

	.liveText {
		color: #888;
		font-size: 13px;
		margin-right: 5rpx;
	}

	.beforeLive {
		padding: 0 10rpx;
		width: 100rpx;
		height: 34rpx;
		background-color: #A271FE;
		text-align: center;
		font-size: 12px;
		letter-spacing: 1px;
		color: #FFF;
		flex-shrink: 0;
	}

	/* #endif */
</style>
